<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页标题</title>
		<link rel="stylesheet" href="styles/banner.css">
		<style>
		*{
		  margin: 0;
			padding: 0;
		}
		hr{
		 margin: 20px 0;
		}
		.test{
		  height: 100px;
		}
		.test:nth-child(1){
		  background: lightblue;
		}
    .test:nth-child(2){
		  background: lightyellow;
		}
		.test:nth-child(3){
		  background: pink;
		}

		.banner1 {
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.banner1 .banner-wrapper{
		 position: relative;
		 left:0;
		 overflow: hidden;
		 transition:left .5s;
		}
		.banner1 .banner-item{
		 float: left;
		}
		</style>
	</head>
	<body>
    <div class="banner">
		  <div class="banner-wrapper">
			  <div class="banner-item test"></div>
			  <div class="banner-item test"></div>
			  <div class="banner-item test"></div>
				<div class="pagination"></div>
			</div>
		</div>
		<hr>
		<div class="banner1">
		  <div class="banner-wrapper">
			  <div class="banner-item test"></div>
			  <div class="banner-item test"></div>
			  <div class="banner-item test"></div>
				<div class="pagination"></div>
			</div>
		</div>
		<script src='scripts/content.js'></script>
		<script>
		  new Carousel('.banner',2000);
		  new Carousel('.banner1',3000);
		</script>
	</body>
</html>